<template>
	<view class="content">
		<u-row gutter="0">
			<u-col span="2">
				<view class="headbox">
					<u-avatar :src="avatarSrc"></u-avatar>
				</view>
			</u-col>
			<u-col span="9">
				<view class="messagebox">
					
					<view class="message">
						<text>{{message}}</text>
					</view>
				
					<view class="datatime">
						<text>{{datatime}}</text>
					</view>
						
				</view>
			</u-col>
			<u-col span="1">
				<view class="pointer">
					
				</view>
			</u-col>
		</u-row>
	</view>
</template>

<script>
	import uAvatar from "@/uviewui/components/u-avatar/u-avatar.vue"
	import uRow  from "@/uviewui/components/u-row/u-row.vue"
	import uCol from "@/uviewui/components/u-col/u-col.vue"
	export default {
		name:"message-item",
		components:{
			uAvatar,
			uRow,
			uCol
		},
		props:['avatarSrc','message','datatime'],
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">

	.content{
		width: 100%;
		background-color:#222222;
		
		.headbox{
			margin: 30rpx 20rpx;
		}
		.messagebox{
			display: flex;
			flex-wrap: wrap;
			flex-direction: column ;
			
		
			.message{
				// background-color: yellow;
				// height:60rpx;
				font-size: 26rpx;
				
			}
			.datatime{
				// background-color: red;
				font-size: 20rpx;
				color: #959595;
			}
		}
		.pointer{
			background-color: #54BBA0;
			width: 16rpx;
			height: 16rpx;
			border-radius: 8rpx;
			
		}
	}
</style>
